<script setup>
import MarkdownWithToc from "./components/MarkdownWithToc.vue";
import { ref } from "vue";

const markdownContent =
  ref(`<h2 data-v-md-heading="_1-用户管理" data-v-md-line="1">1. 用户管理</h2>
<h3 data-v-md-heading="_1-1-查询所有用户" data-v-md-line="3">1.1 查询所有用户</h3>
<h4 data-v-md-heading="_1-1-1-基本信息" data-v-md-line="5">1.1.1 基本信息</h4>
<blockquote data-v-md-line="7">
<p data-v-md-line="7">请求路径：/users</p>
<p data-v-md-line="9">请求方式：GET</p>
<p data-v-md-line="11">接口描述：该接口用于用户列表数据查询</p>
</blockquote>
<h4 data-v-md-heading="_1-1-2-请求参数" data-v-md-line="15">1.1.2 请求参数</h4>
<p data-v-md-line="17">无</p>
<h4 data-v-md-heading="_1-1-3-响应数据" data-v-md-line="21">1.1.3 响应数据</h4>
<p data-v-md-line="23">参数格式：application/json</p>
<p data-v-md-line="25">参数说明：</p>
<table data-v-md-line="27">
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>是否必须</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>code</td>
<td>number</td>
<td>必须</td>
<td>响应码，1 代表成功，0 代表失败</td>
</tr>
<tr>
<td>msg</td>
<td>string</td>
<td>非必须</td>
<td>提示信息</td>
</tr>
<tr>
<td>data</td>
<td>object[ ]</td>
<td>非必须</td>
<td>返回的数据</td>
</tr>
<tr>
<td>|- id</td>
<td>number</td>
<td>非必须</td>
<td>ID</td>
</tr>
<tr>
<td>|- name</td>
<td>string</td>
<td>非必须</td>
<td>姓名</td>
</tr>
<tr>
<td>|- username</td>
<td>string</td>
<td>非必须</td>
<td>用户名</td>
</tr>
<tr>
<td>|- createTime</td>
<td>string</td>
<td>非必须</td>
<td>创建时间</td>
</tr>
<tr>
<td>|- updateTime</td>
<td>string</td>
<td>非必须</td>
<td>修改时间</td>
</tr>
</tbody>
</table>
<p data-v-md-line="38">响应数据样例：</p>
<div data-v-md-line="40"><div class="v-md-pre-wrapper v-md-pre-wrapper-json extra-class"><pre class="v-md-hljs-json"><code><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;code&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;msg&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;success&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
    <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">&quot;id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;张无忌&quot;</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;username&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;zhangwuji&quot;</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;createTime&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;2022-09-01T23:06:29&quot;</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;updateTime&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;2022-09-01T23:06:29&quot;</span>
    <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
    <span class="hljs-punctuation">{</span>
      <span class="hljs-attr">&quot;id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">2</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;赵敏&quot;</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;username&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;zhaomin&quot;</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;createTime&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;2022-09-01T23:06:29&quot;</span><span class="hljs-punctuation">,</span>
      <span class="hljs-attr">&quot;updateTime&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;2022-09-01T23:06:29&quot;</span>
    <span class="hljs-punctuation">}</span>
  <span class="hljs-punctuation">]</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</div></div><h3 data-v-md-heading="_1-2-用户信息分页查询" data-v-md-line="69">1.2 用户信息分页查询</h3>
<h4 data-v-md-heading="_1-2-1-基本信息" data-v-md-line="71">1.2.1 基本信息</h4>
<blockquote data-v-md-line="73">
<p data-v-md-line="73">请求路径：/users</p>
<p data-v-md-line="75">请求方式：GET</p>
<p data-v-md-line="77">接口描述：该接口用于用户列表数据的条件分页查询</p>
</blockquote>
<h4 data-v-md-heading="_1-2-2-请求参数" data-v-md-line="81">1.2.2 请求参数</h4>
<p data-v-md-line="83">参数格式：queryString</p>
<p data-v-md-line="85">参数说明：</p>
<table data-v-md-line="87">
<thead>
<tr>
<th>参数名称</th>
<th>是否必须</th>
<th>示例</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>否</td>
<td>张</td>
<td>姓名</td>
</tr>
<tr>
<td>username</td>
<td>否</td>
<td>zhang</td>
<td>用户名</td>
</tr>
<tr>
<td>page</td>
<td>是</td>
<td>1</td>
<td>分页查询的页码，如果未指定，默认为1</td>
</tr>
<tr>
<td>pageSize</td>
<td>是</td>
<td>10</td>
<td>分页查询的每页记录数，如果未指定，默认为10</td>
</tr>
</tbody>
</table>
<p data-v-md-line="94">请求数据样例：</p>
<div data-v-md-line="96"><div class="v-md-pre-wrapper v-md-pre-wrapper-shell extra-class"><pre class="v-md-hljs-shell"><code>/users?page=1&amp;pageSize=10
/users?name=张&amp;page=1&amp;pageSize=10
/users?name=张&amp;username=zhang&amp;page=1&amp;pageSize=10
</code></pre>
</div></div><h4 data-v-md-heading="_1-2-3-响应数据" data-v-md-line="106">1.2.3 响应数据</h4>
<p data-v-md-line="108">参数格式：application/json</p>
<p data-v-md-line="110">参数说明：</p>
<table data-v-md-line="112">
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>是否必须</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>code</td>
<td>number</td>
<td>必须</td>
<td>响应码, 1 成功 , 0 失败</td>
</tr>
<tr>
<td>msg</td>
<td>string</td>
<td>非必须</td>
<td>提示信息</td>
</tr>
<tr>
<td>data</td>
<td>object</td>
<td>必须</td>
<td>返回的数据</td>
</tr>
<tr>
<td>|- total</td>
<td>number</td>
<td>必须</td>
<td>总记录数</td>
</tr>
<tr>
<td>|- rows</td>
<td>object []</td>
<td>必须</td>
<td>数据列表</td>
</tr>
<tr>
<td>|- id</td>
<td>number</td>
<td>非必须</td>
<td>id</td>
</tr>
<tr>
<td>|- username</td>
<td>string</td>
<td>非必须</td>
<td>用户名</td>
</tr>
<tr>
<td>|- name</td>
<td>string</td>
<td>非必须</td>
<td>姓名</td>
</tr>
<tr>
<td>|- createTime</td>
<td>string</td>
<td>非必须</td>
<td>创建时间</td>
</tr>
<tr>
<td>|- updateTime</td>
<td>string</td>
<td>非必须</td>
<td>更新时间</td>
</tr>
</tbody>
</table>
<p data-v-md-line="125">响应数据样例：</p>
<div data-v-md-line="127"><div class="v-md-pre-wrapper v-md-pre-wrapper-json extra-class"><pre class="v-md-hljs-json"><code><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;code&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;msg&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;success&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;total&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">2</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;rows&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
       <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">&quot;id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;username&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;jinyong&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;金庸&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;createTime&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;2022-09-01T23:06:30&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;updateTime&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;2022-09-02T00:29:04&quot;</span>
      <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
      <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">&quot;id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">2</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;username&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;zhangwuji&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;张无忌&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;createTime&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;2022-09-01T23:06:30&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;updateTime&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;2022-09-02T00:29:04&quot;</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">]</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</div></div><h3 data-v-md-heading="_1-3-删除用户" data-v-md-line="159">1.3 删除用户</h3>
<h4 data-v-md-heading="_1-3-1-基本信息" data-v-md-line="161">1.3.1 基本信息</h4>
<blockquote data-v-md-line="163">
<p data-v-md-line="163">请求路径：/users</p>
<p data-v-md-line="165">请求方式：DELETE</p>
<p data-v-md-line="167">接口描述：该接口用于根据ID删除用户数据</p>
</blockquote>
<h4 data-v-md-heading="_1-3-2-请求参数" data-v-md-line="171">1.3.2 请求参数</h4>
<p data-v-md-line="173">参数类型: 路径参数</p>
<p data-v-md-line="175">参数说明：</p>
<table data-v-md-line="177">
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>是否必须</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>number</td>
<td>必须</td>
<td>用户ID</td>
</tr>
</tbody>
</table>
<p data-v-md-line="181">请求参数样例：</p>
<div data-v-md-line="183"><div class="v-md-pre-wrapper v-md-pre-wrapper- extra-class"><pre class="v-md-hljs-"><code>/users/1
/users/2
</code></pre>
</div></div><h4 data-v-md-heading="_1-3-3-响应数据" data-v-md-line="190">1.3.3 响应数据</h4>
<p data-v-md-line="192">参数格式：application/json</p>
<p data-v-md-line="194">参数说明：</p>
<table data-v-md-line="196">
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>是否必须</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>code</td>
<td>number</td>
<td>必须</td>
<td>响应码，1 代表成功，0 代表失败</td>
</tr>
<tr>
<td>msg</td>
<td>string</td>
<td>非必须</td>
<td>提示信息</td>
</tr>
<tr>
<td>data</td>
<td>object</td>
<td>非必须</td>
<td>返回的数据</td>
</tr>
</tbody>
</table>
<p data-v-md-line="202">响应数据样例：</p>
<div data-v-md-line="204"><div class="v-md-pre-wrapper v-md-pre-wrapper-json extra-class"><pre class="v-md-hljs-json"><code><span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;code&quot;</span><span class="hljs-punctuation">:</span><span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;msg&quot;</span><span class="hljs-punctuation">:</span><span class="hljs-string">&quot;success&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span><span class="hljs-literal"><span class="hljs-keyword">null</span></span>
<span class="hljs-punctuation">}</span>
</code></pre>
</div></div><h3 data-v-md-heading="_1-4-添加用户" data-v-md-line="218">1.4 添加用户</h3>
<h4 data-v-md-heading="_1-4-1-基本信息" data-v-md-line="220">1.4.1 基本信息</h4>
<blockquote data-v-md-line="222">
<p data-v-md-line="222">请求路径：/users</p>
<p data-v-md-line="224">请求方式：POST</p>
<p data-v-md-line="226">接口描述：该接口用于添加用户数据</p>
</blockquote>
<h4 data-v-md-heading="_1-4-2-请求参数" data-v-md-line="231">1.4.2 请求参数</h4>
<p data-v-md-line="233">格式：application/json</p>
<p data-v-md-line="235">参数说明：</p>
<table data-v-md-line="237">
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>是否必须</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>string</td>
<td>必须</td>
<td>姓名</td>
</tr>
<tr>
<td>username</td>
<td>string</td>
<td>必须</td>
<td>用户名</td>
</tr>
</tbody>
</table>
<p data-v-md-line="242">请求参数样例：</p>
<div data-v-md-line="244"><div class="v-md-pre-wrapper v-md-pre-wrapper-json extra-class"><pre class="v-md-hljs-json"><code><span class="hljs-punctuation">{</span>
	<span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;周芷若&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;username&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;zhouzhiruo&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</div></div><h4 data-v-md-heading="_1-4-3-响应数据" data-v-md-line="253">1.4.3 响应数据</h4>
<p data-v-md-line="255">参数格式：application/json</p>
<p data-v-md-line="257">参数说明：</p>
<table data-v-md-line="259">
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>是否必须</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>code</td>
<td>number</td>
<td>必须</td>
<td>响应码，1 代表成功，0 代表失败</td>
</tr>
<tr>
<td>msg</td>
<td>string</td>
<td>非必须</td>
<td>提示信息</td>
</tr>
<tr>
<td>data</td>
<td>object</td>
<td>非必须</td>
<td>返回的数据</td>
</tr>
</tbody>
</table>
<p data-v-md-line="265">响应数据样例：</p>
<div data-v-md-line="267"><div class="v-md-pre-wrapper v-md-pre-wrapper-json extra-class"><pre class="v-md-hljs-json"><code><span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;code&quot;</span><span class="hljs-punctuation">:</span><span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;msg&quot;</span><span class="hljs-punctuation">:</span><span class="hljs-string">&quot;success&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span><span class="hljs-literal"><span class="hljs-keyword">null</span></span>
<span class="hljs-punctuation">}</span>
</code></pre>
</div></div><h3 data-v-md-heading="_1-5-根据id查询" data-v-md-line="279">1.5 根据ID查询</h3>
<h4 data-v-md-heading="_1-5-1-基本信息" data-v-md-line="281">1.5.1 基本信息</h4>
<blockquote data-v-md-line="283">
<p data-v-md-line="283">请求路径：/users/{id}</p>
<p data-v-md-line="285">请求方式：GET</p>
<p data-v-md-line="287">接口描述：该接口用于根据ID查询用户数据</p>
</blockquote>
<h4 data-v-md-heading="_1-5-2-请求参数" data-v-md-line="292">1.5.2 请求参数</h4>
<p data-v-md-line="294">参数格式：路径参数</p>
<p data-v-md-line="296">参数说明：</p>
<table data-v-md-line="298">
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>是否必须</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>number</td>
<td>必须</td>
<td>用户ID</td>
</tr>
</tbody>
</table>
<p data-v-md-line="302">请求参数样例：</p>
<div data-v-md-line="304"><div class="v-md-pre-wrapper v-md-pre-wrapper- extra-class"><pre class="v-md-hljs-"><code>/users/1
/users/3
</code></pre>
</div></div><h4 data-v-md-heading="_1-5-3-响应数据" data-v-md-line="313">1.5.3 响应数据</h4>
<p data-v-md-line="315">参数格式：application/json</p>
<p data-v-md-line="317">参数说明：</p>
<table data-v-md-line="319">
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>是否必须</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>code</td>
<td>number</td>
<td>必须</td>
<td>响应码，1 代表成功，0 代表失败</td>
</tr>
<tr>
<td>msg</td>
<td>string</td>
<td>非必须</td>
<td>提示信息</td>
</tr>
<tr>
<td>data</td>
<td>object</td>
<td>非必须</td>
<td>返回的数据</td>
</tr>
<tr>
<td>|- id</td>
<td>number</td>
<td>非必须</td>
<td>ID</td>
</tr>
<tr>
<td>|- name</td>
<td>string</td>
<td>非必须</td>
<td>姓名</td>
</tr>
<tr>
<td>|- username</td>
<td>string</td>
<td>非必须</td>
<td>用户名</td>
</tr>
<tr>
<td>|- createTime</td>
<td>string</td>
<td>非必须</td>
<td>创建时间</td>
</tr>
<tr>
<td>|- updateTime</td>
<td>string</td>
<td>非必须</td>
<td>修改时间</td>
</tr>
</tbody>
</table>
<p data-v-md-line="330">响应数据样例：</p>
<div data-v-md-line="332"><div class="v-md-pre-wrapper v-md-pre-wrapper-json extra-class"><pre class="v-md-hljs-json"><code><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;code&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;msg&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;success&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;张无忌&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;username&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;zhangwuji&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;createTime&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;2022-09-01T23:06:29&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;updateTime&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;2022-09-01T23:06:29&quot;</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</div></div><h3 data-v-md-heading="_1-6-修改用户" data-v-md-line="350">1.6 修改用户</h3>
<h4 data-v-md-heading="_1-6-1-基本信息" data-v-md-line="351">1.6.1 基本信息</h4>
<blockquote data-v-md-line="353">
<p data-v-md-line="353">请求路径：/users</p>
<p data-v-md-line="355">请求方式：PUT</p>
<p data-v-md-line="357">接口描述：该接口用于修改用户数据</p>
</blockquote>
<h4 data-v-md-heading="_1-6-2-请求参数" data-v-md-line="361">1.6.2 请求参数</h4>
<p data-v-md-line="363">格式：application/json</p>
<p data-v-md-line="365">参数说明：</p>
<table data-v-md-line="367">
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>是否必须</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>number</td>
<td>必须</td>
<td>用户ID</td>
</tr>
<tr>
<td>name</td>
<td>string</td>
<td>必须</td>
<td>姓名</td>
</tr>
<tr>
<td>username</td>
<td>string</td>
<td>必须</td>
<td>用户名</td>
</tr>
</tbody>
</table>
<p data-v-md-line="373">请求参数样例：</p>
<div data-v-md-line="375"><div class="v-md-pre-wrapper v-md-pre-wrapper-json extra-class"><pre class="v-md-hljs-json"><code><span class="hljs-punctuation">{</span>
	<span class="hljs-attr">&quot;id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
	<span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;小昭&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;username&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;xiaozhao&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre>
</div></div><h4 data-v-md-heading="_1-6-3-响应数据" data-v-md-line="385">1.6.3 响应数据</h4>
<p data-v-md-line="387">参数格式：application/json</p>
<p data-v-md-line="389">参数说明：</p>
<table data-v-md-line="391">
<thead>
<tr>
<th>参数名</th>
<th>类型</th>
<th>是否必须</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>code</td>
<td>number</td>
<td>必须</td>
<td>响应码，1 代表成功，0 代表失败</td>
</tr>
<tr>
<td>msg</td>
<td>string</td>
<td>非必须</td>
<td>提示信息</td>
</tr>
<tr>
<td>data</td>
<td>object</td>
<td>非必须</td>
<td>返回的数据</td>
</tr>
</tbody>
</table>
<p data-v-md-line="397">响应数据样例：</p>
<div data-v-md-line="399"><div class="v-md-pre-wrapper v-md-pre-wrapper-json extra-class"><pre class="v-md-hljs-json"><code><span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;code&quot;</span><span class="hljs-punctuation">:</span><span class="hljs-number">1</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;msg&quot;</span><span class="hljs-punctuation">:</span><span class="hljs-string">&quot;success&quot;</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span><span class="hljs-literal"><span class="hljs-keyword">null</span></span>
<span class="hljs-punctuation">}</span>
</code></pre>
</div></div><p data-v-md-line="415">​</p>`);
</script>

<template>
  <div class="app">
    <div class="app-header">
      <h1>接口文档查看器</h1>
    </div>
    <div class="app-content">
      <MarkdownWithToc :markdownContent="markdownContent" />
    </div>
  </div>
</template>

<style scoped>
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Arial, sans-serif;
}

.app-header {
  background: #24292e;
  color: white;
  padding: 16px 24px;
  border-bottom: 1px solid #e1e4e8;
}

.app-header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.app-content {
  flex: 1;
  overflow: hidden;
}
</style>